#menu
  box-shadow: 0 8px 16px rgba($black, 0.1)
  min-height: 31px !important
  font-size: 12px

  .container
    min-height: 32px !important

  ul.navbar-menu
    box-shadow: none
    margin-left: -0.75rem
    margin-right: -0.75rem

  li
    padding: 0 0.75rem

  li ul
    display: none

  a
    color: #999

    &:hover
      color: #000

#nav
  background-color: $body-background-color
  font-size: 0.87rem
  font-weight: 700

  .navbar-menu,
  .container
    background: #363636

  a
    color: #ffffff

.mzERK-Nav-item
  padding: 0.5rem 0.95rem
  display: flex
  align-items: center
  // line-height: 1.5
  // position: relative

#blog-title
  line-height: 0

  img
    min-width: 26px
    max-height: 31px

  a:hover
    border-bottom-color: transparent

+from($navbar-breakpoint)
  .navbar-menu li ul
    position: absolute
    z-index: 99
    background: #363636
    left: 0
    transition: opacity 0.4s ease 0s, top 0.4s ease 0s
    top: $navbar-height * 2
    opacity: 0

    // display: none

    li
      white-space: nowrap

  #nav li
    overflow: hidden

    &:hover
      background: #000
      transition: background 0.3s ease 0s
      overflow: unset

      ul
        // display: block
        opacity: 1
        top: $navbar-height

+until($navbar-breakpoint)
  #menu .navbar-menu
    display: flex
    padding: 0

    .navbar-item
      align-items: center
      display: flex

  .navbar-burger + .is-active
    margin-top: -0.75rem

  #nav .navbar-menu li
    padding: 0

    ul
      margin-left: 0.7rem
      background: #363636

    a
      padding: 0.5rem 0.95rem
      display: block

    a:hover
      border-bottom-color: #000
      background: #000
      transition: all 0.3s ease 0s

.s-icon
  display: block
  width: 24px
  height: 24px
  background: url("images/social_icon.gif") no-repeat

  &.feed
    background-position: 0 -48px

  &.feed2
    background-position: 0 -72px

.s-icon .hover
  opacity: 0
  transition: opacity 0.47s ease

  &:hover
    opacity: 1
